<template>
  <el-card shadow="never">
    <div v-if="showTitle" slot="header">
      <span>原材料信息</span>
    </div>
    <skus-table
      :showTotal="false"
      :showSelectCol="false"
      :showPagination="false"
      :columns="tableColumn"
      :dataSource="tableList"
      :tableHeight="270"
      @handleCancelSelect="handleCancelSelect"
      @handleSelectChange="handleSelectChange"
    >
      <div v-if="!readonly && canEdit" slot="content_context" style="margin-bottom: 5px">
        <el-button size="mini" type="primary" @click="handleAddRow"
          >添加行</el-button
        >
      </div>
    </skus-table>
    <SelectRawMaterial
      :visible.sync="materialVisible"
      @getCoreRawMaterialInfo="handleMaterialSelect"
    />
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import SelectRawMaterial from './SelectCoreRawMaterial'
// import { OVERFLOAT_WARNING_TYPES } from '@/pages/supplier/constants/common';
// import { list2Obj } from '@/pages/supplier/utils';

export default {
  // 原材料信息组件
  components: {
    SkusTable,
    SelectRawMaterial
  },
  props: {
    dataSource: {
      type: Array,
      default: () => {
        return []
      }
    },
    contractInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    operation: {
      type: Array
    }
  },
  data () {
    return {
      key: 0,
      tableColumn: [],
      tableList: [],
      canEdit: false,
      materialVisible: false,
      currentRow: {}
    };
  },
  computed: {},
  watch: {
    contractInfo: {
      handler (newVal) {
        // 1 是 2 否 约定价格是否依据原材料进行公式核算
        if (newVal?.priceBaseOnRawMaterial) {
          if (newVal?.priceBaseOnRawMaterial == 1) {
            this.canEdit = true
          }
          if (newVal?.priceBaseOnRawMaterial == 2) {
            this.canEdit = false
            this.tableList = []
          }
          this.initTableCloumn()
        }
      },
      deep: true,
      immediate: true
    },
    dataSource: {
      handler (newVal) {
        this.tableList = newVal
        if (this.tableList.length == 0 && !this.readonly && this.canEdit) {
          this.handleAddRow()
        }
      },
      immediate: true,
      deep: true
    },
    tableList: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.$emit('change', { value: newVal, prop: 'supplierRawMaterialBillList' })
        }
      },
      immediate: true,
      deep: true
    },
  },
  created () {
    // this.initTableCloumn()
  },
  methods: {
    // 选择核心原材料
    handleMaterialSelect (data) {
      const { name, overFloatWarnFlag } = data
      this.currentRow.rawMaterialName = name
      this.currentRow.rawMaterialOverFloatWarn = overFloatWarnFlag
    },
    initChildren (key) {
      return [
        {
          title: '原值',
          key: `${key}Old`,
        },
        {
          title: '现值',
          key: key,
        }
      ]
    },
    // 初始化表列
    initTableCloumn () {
      if (this.readonly || !this.canEdit) {
        const tableColumn = [
          { key: 'rawMaterialSupplier', title: '原材料供应商' },
          { key: 'rawMaterialName', title: '核心原材料名称' },
          { key: 'rawMaterialWeb', title: '原材料获取网址' },
          { key: 'rawMaterialPriceRef', title: '原材料价格参照方' },
          { key: 'rawMaterialSpecification', title: '核心原材料对应规格' },
          { key: 'rawMaterialPriceFloatRate', title: '原材料价格浮动率(%)' },
          { key: 'goodsName', title: '产品名称' },
          { key: 'goodsPriceFloatRate', title: '产品价格浮动率(%)' },
        ];
        if (this.operation) {
          this.tableColumn = tableColumn.map(({ key, title }) => ({
            key,
            title,
            children: this.initChildren(key)
          }))
        } else {
          this.tableColumn = tableColumn;
        }
      } else {
        this.tableColumn = [
          { key: 'rawMaterialSupplier', title: '原材料供应商', type: 'input', width: 100 },
          {
            key: 'rawMaterialName',
            title: '核心原材料名称',
            width: 100,
            required: true,
            render: (h, { row, index }) => {
              return <el-input
                clearable
                value={row.rawMaterialName}
                prefix-icon="el-icon-search"
                onFocus={() => { this.materialVisible = true; this.currentRow = row }}
                placeholder="请选择"
                onClear={() => { row.rawMaterialName = '' }}
              />
            }
          },
          { key: 'rawMaterialWeb', title: '原材料获取网址', type: 'input', width: 100, required: true },
          { key: 'rawMaterialPriceRef', title: '原材料价格参照方', type: 'input', width: 100, required: true },
          { key: 'rawMaterialSpecification', title: '核心原材料对应规格', type: 'input', width: 100, required: true },
          {
            key: 'rawMaterialPriceFloatRate',
            title: '原材料价格浮动率(%)',
            width: 120,
            required: true,
            type: 'inputNum',
          },
          { key: 'goodsName', title: '产品名称', type: 'input', required: true, },
          {
            key: 'goodsPriceFloatRate',
            title: '产品价格浮动率(%)',
            width: 120,
            required: true,
            render: (h, { row }) => {
              return <el-input-number
                v-model={row.goodsPriceFloatRate}
                controls-position="right"
                min={0}
                max={99999999}
                disabled={row.disable}
              />
            }
          },
          /* {
            key: 'rawMaterialOverFloatWarn',
            title: '原材料超浮动预警',
            width: 100,
            required: true,
            render: (h, { row }) => {
              return <el-select disabled v-model={row.rawMaterialOverFloatWarn} placeholder="">
                {
                  OVERFLOAT_WARNING_TYPES.map(item => {
                    return (
                      <el-option key={item.value} value={item.value} label={item.label}/>
                    )
                  })
                }
              </el-select>
            }
          }, */
          { key: 'action', title: '操作', fixd: 'right' },
        ];
      }
    },
    // 删除
    handleCancelSelect ({ row, index }) {
      if (this.tableList.length > 1) {
        this.tableList.splice(index, 1);
      }
    },
    handleSelectChange (data) {},
    // 添加行
    handleAddRow () {
      this.tableList.push({
        key: ++this.key,
        rawMaterialSupplier: '',
        rawMaterialName: '',
        rawMaterialWeb: '',
        rawMaterialPriceRef: '',
        rawMaterialPriceFloatRate: 0,
        rawMaterialSpecification: '',
        goodsName: '',
        goodsPriceFloatRate: 0,
        rawMaterialOverFloatWarn: null,
      })
    },
    getValidate () {
      console.log(this.tableList)
      if (this.canEdit && this.tableList.some(
        item => !item.rawMaterialName ||
        !item.rawMaterialWeb ||
        !item.rawMaterialPriceRef ||
        !item.rawMaterialSpecification ||
        (!item.rawMaterialPriceFloatRate && item.rawMaterialPriceFloatRate != 0) ||
        (!item.goodsPriceFloatRate && item.goodsPriceFloatRate != 0) ||
        !item.goodsName)) {
        this.$message.error('请将原材料信息填写完整')
        return true;
      }
      return false;
    },
    getData () {
      return this.tableList
    },
  },
};
</script>
<style scoped>
.page-footer {
  margin-top: 10px;
}
</style>
